<template>
  <div class="song-lyric">
    <h1 class="lyric-title">歌词</h1>
    <!-- 有歌词 -->
    <ul class="has-lyric" v-if="lyr.length" key="index">
      <li v-for="(item,index) in lyr" :key="index">
        {{item[1]}}
      </li>
    </ul>
    <!-- 没有歌词 -->
    <div v-else class="no-lyric" key="no-lyric">
      <span>暂无歌词</span>
    </div>
    <Comment :play-id="id" type="0"></Comment>
  </div>
</template>

<script>
  import Comment from '../components/Comment'
  import {mixin} from '../mixins';
  import {mapGetters} from 'vuex';
  export default {
    mixins:[mixin],
    name: 'Lyric',
    components:{
      Comment
    },
    data(){
      return {
        lyr: [] ,        //当前歌曲的歌词
      }
    },
    computed: {
      ...mapGetters([
        'curTime',      //当前歌曲播放到的位置
        'id',           //当前播放的歌曲id
        'lyric',        //歌词
        'listIndex',    //当前歌曲在歌单中的位置
        'listOfSongs',  //当前歌单列表
      ])
    },
    created(){
      this.lyr = this.lyric;
    },
    watch: {
      id: function () {
        this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
      },
      //原理：先把全部歌词变成正常状态，再根据当前歌曲播放时间是否等于歌词时间，是则把它变蓝变大（每一次遍历歌词都是正常状态）
      curTime: function () {
        if (this.lyr.length > 0) {
          for (let i = 0; i < this.lyr.length; i++) {
            //lyr[i][0]表示时间
            if (this.curTime >= this.lyr[i][0]) {
              //将不等于当前播放时间的歌词变成正常状态
              for (let j = 0; j < this.lyr.length; j++) {
                document.querySelectorAll('.has-lyric li')[j].style.color = '#000';
                document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';
              }
              //如果当前播放时间等于歌词的时间，变蓝和变大
              if (this.curTime = this.lyr[i][0]) {
                document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6';
                document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';
              }
            }
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
@import "../assets/css/lyric.scss";
</style>
